<template>
    <div class="gift-goods-wrapper">
        <div class="gift-img-wrapper">
            <xe-image
                class="gift-img"
                :src="handleCompressImg(goodsImg)"
                fit="blur"
                radiusData="0.08rem"
            />
            <div class="gift-img-shadow" v-if="goodsInfo.sku_stock === 0">
                <div class="gift-img-shadow-text">{{ invalidText }}</div>
            </div>
        </div>
        <div class="gift-goods-info">
            <div class="gift-goods-title">{{ goodsInfo.goods_name }}</div>
            <div class="gift-goods-specification">
                <span class="gift-goods-specification-text">{{
                    specification
                }}</span>
            </div>
            <div class="gift-goods-amount">
                <div class="gift-goods-price">
                    <span class="piece-price">￥0</span>
                    <span class="origin-price">原价￥{{ price }}</span>
                </div>
                <div class="gift-goods-count">x1</div>
            </div>
        </div>
    </div>
</template>

<script>
import { Image as XeImage } from '@xiaoe/vant';
import { replaceCDN } from "@xiaoe/js-tools/lib/replaceCDN";

export default {
    props: {
        goodsInfo: {
            type: Object,
            default: () => {},
        },
    },
    components: {
        XeImage
    },
    data() {
        return {
            defaultImg: require("./images/default.png"),
        };
    },
    computed: {
        invalidText() {
            if (this.goodsInfo.goods_type === 35) {
                return "名额\n已满";
            }
            return "补货中";
        },
        specification() {
            const type = this.goodsInfo.goods_type;
            let desc = "";
            if (type === 21) {
                const specs_info = this.goodsInfo.specs_info;
                desc =
                    specs_info &&
                    specs_info
                        .map((spec) => {
                            return spec.attr_value;
                        })
                        .join(";");
            } else if (type === 23) {
                // 超级会员
                const sVipInfo = this.goodsInfo.goods_specification;
                const standardMap = {
                    1: "7天",
                    2: "1个月",
                    3: "3个月",
                    4: "6个月",
                    5: "12个月",
                    6: sVipInfo.period + "天",
                    7: sVipInfo.period + "天",
                    8: "永久有效",
                };
                desc = standardMap[sVipInfo.type] || "";
            }
            return desc;
        },
        price() {
            let skuPrice = this.goodsInfo.sku_price || 0;
            return (skuPrice / 100).toFixed(2);
        },
        goodsImg() {
            return this.goodsInfo.goods_img || this.defaultImg;
        },
    },
    methods: {
        handleCompressImg(url) {
            return replaceCDN(url, { width: 120 });
        }
    }
};
</script>
<style lang="scss" scoped>
.gift-goods-wrapper {
    display: flex;
    padding: 0.08rem;
    background: #f5f5f5;
    border-radius: 0.08rem;

    &+.gift-goods-wrapper {
        margin-top: .08rem;
    }
}
.gift-img-wrapper {
    position: relative;
    width: 1.28rem;
    height: 1.28rem;
    flex-shrink: 0;
    border-radius: 0.08rem;
    border: 1px solid #ebebeb;
    overflow: hidden;
}
.gift-img-shadow {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
}
.gift-img-shadow-text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.76rem;
    height: 0.76rem;
    border-radius: 0.76rem;
    font-size: 0.2rem;
    text-size-adjust: none;
    background: #fafcfe;
    white-space: pre-line;
}

.gift-img-shadow-text::after {
    content: "";
    position: absolute;
    top: -0.04rem;
    left: -0.04rem;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.8rem;
    border: 1px solid #fafcfe;
}
// .gift-img {
//     width: 1.28rem;
//     height: 1.28rem;
//     flex-shrink: 0;
//     border-radius: .08rem;
//     border: 1px solid #EBEBEB;
//     overflow: hidden;
// }
.gift-goods-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    overflow: hidden;
    padding: 0.08rem;
}

.gift-goods-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.gift-goods-amount {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.piece-price {
    color: #ff5429;
}
.gift-goods-specification-text,
.origin-price {
    display: inline-block;
    font-size: 0.24rem;
    transform: scale(0.83);
    color: #999999;
}

.gift-goods-count {
    color: #999;
    font-size: 0.24rem;
}
</style>